<template>
  <div class="pinglun_lsit">
    <h3>精彩评论</h3>
    <ul v-for="(item, index) in Pinlun" :key="index">
      <li class="tanxing">
        <img :src="item.avatarUrl" alt="" width="50" />
        <div class="desc">
          <p>
            <span>{{ item.nickname }}</span
            >：就按规划开发比较好开发技术部代理费比较难房间内的
          </p>
          <div>2019年11月14日</div>
        </div>
        <div class="callback">
          <span>&nbsp;</span><span>（121554）</span><span>回复</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["Pinlun"],
  data() {
    return {


    }
  }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
h3 {
  color: #333;
  font-size: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #cfcfcf;
}
ul {
  margin-top: 15px;
  li {
    border-bottom: 1px dotted #cfcfcf;
    padding-bottom: 10px;
  }
}
.desc {
  margin-left: -110px;
  p {
    span {
      color: cornflowerblue;
    }
  }
  div {
    color: darkgray;
    margin-top: 20px;
  }
}
.callback {
  margin-top: 40px;
  color: #333;
  span {
    &:nth-of-type(1) {
      display: inline-block;
      cursor: pointer;
      background: url(../assets/icon2.png) no-repeat;
      width: 15px;
      height: 14px;
      background-position: -150px 0;
    }
    &:nth-of-type(2) {
      cursor: pointer;
      border-right: 2px solid darkgray;
    }
    &:nth-of-type(3) {
      cursor: pointer;
      margin-left: 10px;
    }
  }
}
</style>